<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../todo-list/todo-list.html">
<link rel="import" href="../todo-list/todo-form.html">

<dom-module id="app-main">
  <template>
    <style>
      :host{
        display: block;
      }
    </style>
    <h2>[[prop1]]</h2>
    <todo-form on-add-todo="handlerAdd"></todo-form>
    <todo-list todos="[[todos]]" on-del-todo="handlerDel"></todo-list>

  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class AppMain extends Polymer.Element {
      constructor(){
        super();
        this.todos = [{
              id:1,
              content: "去浪啊",
              isComplete: false
          },{
              id: 2,
              content: "去浪啊2",
              isComplete: false
          }];
      }
      static get is() { return 'app-main'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'TodoList app'
          }
        };
      }
      handlerDel(e){
          //获取传递过来的参数
          const id = e.detail.id;
          //获取当前需要删除的元素的index
          const index = this.todos.findIndex(item=>item.id==id);
          //使用splice方法，删除一个元素，并且触发重新渲染
          this.splice("todos",index,1);
      }
      handlerAdd(e){
        const content = e.detail.content;
        this.push("todos",{
          id: this.todos.length + 1,
          content
        })
      }
    }

    window.customElements.define(AppMain.is, AppMain);
  </script>
</dom-module>
